<template>
  <div class="header-search-select-box">
    <el-select
      v-model="state.selectList"
      filterable
      multiple
      collapse-tags
      placeholder="请选择分组条件"
      class="header-search-select"
      clearable
      :filterMethod="filterMethod"
      @visible-change="visibleChange"
    >
      <el-option
        v-for="(item, index) in optionLists"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      />
    </el-select>
    <el-button class="btn" @click="checkGroup">分组</el-button>
  </div>
</template>

<script setup name="GroupSelect">
import pinyin from 'js-pinyin'
const { proxy } = getCurrentInstance()
const props = defineProps({
  options: {
    type: Array,
    default: function () {
      return []
    },
  },
  selections: {
    type: Array,
    default: function () {
      return []
    },
  },
})
const optionLists = ref([])
const copyOptions = ref([])
const emit = defineEmits()
const state = reactive({
  selectList: [],
})
watch(
  () => state.selectList,
  (val) => {
    emit('callbackVal', val)
  }
)
watch(
  () => props.selections,
  (val) => {
    console.log(val, 'props.selections')
    state.selectList = val
  }
)
watch(
  () => props.options,
  (val) => {
    optionLists.value = proxy.$fn.deepClone(val)
    copyOptions.value = proxy.$fn.deepClone(val)
  },
  {
    immediate: true,
    deep: true,
  }
)
function visibleChange(val) {
  //下拉框出现/隐藏时触发
  if (!val) {
    optionLists.value = copyOptions.value
  }
}
function filterMethod(value) {
  //	自定义搜索方法
  if (value) {
    let result = []
    copyOptions.value.forEach((item) => {
      pinyin.setOptions({ checkPolyphone: false, charCase: 1 })
      const resultEng = pinyin.getCamelChars(item.key).toUpperCase()
      const matchResult = item.key.indexOf(value) !== -1 || resultEng.indexOf(value.toUpperCase()) !== -1
      // let matchResult = PinYinMatch.match(item.key, value)
      if (matchResult) {
        result.push(item)
      }
    })
    optionLists.value = result
  } else {
    optionLists.value = copyOptions.value
  }
}
function checkGroup() {
  emit('callback', state.selectList)
}
</script>

<style lang="scss" scoped>
.header-search-select-box {
  //height: 27.6px;
  height: 100%;
  overflow: hidden;
  margin-right: 10px;
  //border: 1px solid #6dc1a9;
  border-radius: 3px;
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: space-between;
  .search-icon {
    cursor: pointer;
    font-size: 18px;
    vertical-align: middle;
  }
  .header-search-select {
    font-size: 18px;
    transition: width 0.2s;
    width: 210px;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    display: inline-block;
    vertical-align: middle;

    .el-input__inner {
      border-radius: 0;
      border: 0;
      box-shadow: none !important;
      //border-right: 1px solid #6dc1a9;
      vertical-align: middle;
      background: transparent;
      color: #fff;
    }
  }
  .btn {
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    border-left: 1px solid #fff;
  }
}
</style>
